import 'package:car_map/page/res/gaps.dart';
import 'package:car_map/page/res/styles.dart';
import 'package:car_map/page/routers/fluro_navigator.dart';
import 'package:car_map/widget/load_image.dart';
import 'package:car_map/widget/widget_progressbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

///咖啡详情
class CoffeeDetailsPage extends StatefulWidget {
  @override
  _coffeeDetailsState createState() => _coffeeDetailsState();
}

class _coffeeDetailsState extends State<CoffeeDetailsPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        body: ListView(
      children: <Widget>[
        Container(
          height: ScreenUtil().setHeight(700.0),
          child: Stack(
            children: <Widget>[
              Container(
                height: ScreenUtil().setHeight(700.0),
                child: LoadImage(
                  'https://s2.luckincoffeecdn.com/luckywebrm/images/pimg/tea/product/product_wheel_tea_2-1.jpg',
                  fit: BoxFit.cover,
                ),
              ),
              Positioned(
                child: detailsInfoMoney(),
                top: ScreenUtil().setHeight(550.0),
              ),
              Positioned(
                  top: ScreenUtil().setHeight(15.0),
                  left: ScreenUtil().setWidth(15.0),
                  child: Container(
                    padding: EdgeInsets.all(10.0),
                    child: InkWell(
                      onTap: () {
                        NavigatorUtils.goBack(context);
                      },
                      child: Icon(
                        Icons.arrow_back,
                        color: Colors.black54,
                        size: 25.0,
                      ),
                    ),
                  ))
            ],
          ),
        ),
        detailsFormula(),
        descriptionWidget(),
        spankWidget(title: '大咖说'),
        celebrityWidget(),
        evaluationTitleWidget(),
        evaluationListWidget(),
      ],
    ));
  }

  //商品名称鸡价格
  Widget detailsInfoMoney() {
    return Container(
      padding: EdgeInsets.only(left: 20.0, right: 20.0),
      width: ScreenUtil().setWidth(750.0),
      height: ScreenUtil().setHeight(150.0),
      margin: EdgeInsets.only(top: 10.0),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0))),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(
                    '非浓缩还原鲜榨橙汁',
                    style: TextStyles.textSize16,
                  ),
                  Gaps.hGap8,
                  Container(
                    padding: EdgeInsets.only(
                        left: 4.0, right: 4.0, top: 3.0, bottom: 3.0),
                    decoration: BoxDecoration(
                        color: Colors.orange,
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(10.0),
                            topRight: Radius.circular(10.0),
                            bottomRight: Radius.circular(10.0))),
                    child: Text(
                      '新品',
                      style: TextStyle(
                          fontSize: ScreenUtil().setSp(18.0),
                          color: Colors.white),
                    ),
                  ),
                ],
              ),
              Text(
                '99%',
                style: TextStyle(
                    color: Colors.pink,
                    fontSize: 16.0,
                    fontWeight: FontWeight.bold),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                'NFC Fresh Organge Juice',
                style: TextStyle(color: Colors.black45),
              ),
              Text(
                '好评率',
                style: TextStyle(color: Colors.black45),
              )
            ],
          ),
        ],
      ),
    );
  }

  //原料配方
  Widget detailsFormula() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(20.0),
      child: Row(
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Text(
                '主要原料:',
                style: TextStyles.textBlack14,
              ),
              Gaps.vGap8,
              Text('将含量:', style: TextStyles.textBlack14),
              Gaps.vGap8,
              Text('储存条件:', style: TextStyles.textBlack14),
            ],
          ),
          Gaps.hGap15,
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text('新鲜原果鲜榨汁'),
              Gaps.vGap8,
              Text('330ml'),
              Gaps.vGap8,
              Text('0-6℃建议送到后尽快饮用'),
            ],
          ),
        ],
      ),
    );
  }

  //商品说明
  Widget descriptionWidget() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(20.0),
      child: Text(
        'For providing professional coffee services for large enterprises and mid-high end office buildings, please call us. Store ownership transfer is also welcomed.',
        style: TextStyle(color: Colors.black45),
      ),
    );
  }

  //大咖说
  Widget spankWidget({String title}) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(20.0),
      child: Text(
        title,
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
      ),
    );
  }

  //名人语录
  Widget celebrityWidget() {
    return Container(
      height: ScreenUtil().setHeight(310.0),
      padding: EdgeInsets.all(20.0),
      color: Colors.white,
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  ClipOval(
                    child: LoadImage(
                      'http://pic2.zhimg.com/v2-d75a41a35e6003f28be565326596c975_b.jpg',
                      fit: BoxFit.cover,
                      width: ScreenUtil().setWidth(155.0),
                      height: ScreenUtil().setHeight(130.0),
                    ),
                  ),
                  Gaps.hGap15,
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(
                        '汤唯',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 10.0),
                        padding: EdgeInsets.only(
                            left: 4.0, right: 4.0, top: 3.0, bottom: 3.0),
                        decoration: BoxDecoration(
                            color: Colors.red[400],
                            borderRadius:
                                BorderRadius.all(Radius.circular(10.0))),
                        child: Text(
                          '代言人',
                          style: TextStyle(
                              fontSize: ScreenUtil().setSp(18.0),
                              color: Colors.white),
                        ),
                      )
                    ],
                  ),
                ],
              ),
              Text(
                '2019-11-18 16:59:16',
                style: TextStyle(fontSize: 12.0, color: Colors.black54),
              )
            ],
          ),
          SizedBox(
            height: 20.0,
          ),
          Text(
            'Every cup of our coffee is made fresh just for you, guaranteed',
            style: TextStyle(color: Colors.black87),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }

  //用户评价
  Widget evaluationTitleWidget() {
    return Container(
      color: Colors.white,
      height: ScreenUtil().setHeight(70.0),
      padding: EdgeInsets.only(left: 20.0, right: 20.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            '用户评价',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
          ),
          Row(
            children: <Widget>[
              Text(
                '更多评价(57)',
                style: TextStyle(color: Colors.orange),
              ),
              Icon(Icons.navigate_next),
            ],
          )
        ],
      ),
    );
  }

  //评价
  Widget evaluationListWidget() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(left: 10.0, right: 10.0,top: 10.0,bottom: 10.0),
      child: ListView.builder(
        itemBuilder: (context, index) {
          return evaluationItem();
        },
        itemCount: 5,
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
      ),
    );
  }

  //评价item
  Widget evaluationItem() {
    return Container(
      padding: EdgeInsets.only(bottom: 25.0),
      child: Column(
        children: <Widget>[
          evaluationUserInfo(),
          Gaps.vGap10,
          customerDescriptionWidget(),
          Gaps.vGap10,
          evaluationImage(),
        ],
      ),
    );
  }

  //评价的个人信息和时间级评级
  Widget evaluationUserInfo() {
    return Container(
      height: ScreenUtil().setHeight(50.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Row(
            children: <Widget>[
              ClipOval(
                child: LoadImage(
                  'http://pic4.zhimg.com/v2-148c9e2001681029a0556e11331dc9bb_b.jpg',
                  fit: BoxFit.cover,
                  height: ScreenUtil().setHeight(50.0),
                  width: ScreenUtil().setWidth(60.0),
                ),
              ),
              Gaps.hGap10,
              Text('蒙拉丽莎的皮卡丘'),
              Gaps.hGap10,
              WidgetProgressBar(
                width: 100.0,
                height: 30.0,
                indexBar: 4,
                maxLenth: 5,
                colorsType: Colors.yellow,
              ),
            ],
          ),
          Text(
            '2019-11-18',
            style: TextStyle(fontSize: 12.0, color: Colors.black54),
          )
        ],
      ),
    );
  }
  
  //客户评价说明
  Widget customerDescriptionWidget(){
    return Container(
      child: Text('She is a master of exposition and description , with a ready ear for a telling anecdote.',
      style: TextStyle(color: Colors.black54),
      ),
    );
  }

  //客户评价图片
  Widget evaluationImage(){
    return Container(
      child:GridView.builder(
        shrinkWrap: true,
          physics: new NeverScrollableScrollPhysics(),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //横轴元素个数
              crossAxisCount:4,
              //纵轴间距
              mainAxisSpacing: 20.0,
              //横轴间距
              crossAxisSpacing: 5.0,
              //子组件宽高长度比例
              childAspectRatio: 1.0),
          itemBuilder: (context,index){
            return ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              child: Container(
                width: ScreenUtil().setWidth(120.0),
                height: ScreenUtil().setHeight(90.0),
                child: LoadImage(
                  'https://s2.luckincoffeecdn.com/luckywebrm/images/pimg/tea/product/product_wheel_tea_1-1.jpg',
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
        itemCount: 4,
      ) ,
    );
  }
}
